//导入
const gulp = require('gulp')
const uglify =require('gulp-uglify') //去掉注释
const babel =require('gulp-babel') //解决兼容性问题
const rev = require('gulp-rev') //打包文件加随机名
const clean = require('gulp-clean') //清楚目录
const minifyCSS = require('gulp-minify-css') //压缩css任务
const imagemin = require('gulp-imagemin')//压缩图片
// const htmlmin = require('gulp-htmlmin')  // 压缩HTML 去空格去注视
const revCollector = require('gulp-rev-collector'); // 根据temp目录记录的规则 替换 html路径
const minifyhtml = require('gulp-minify-html'); // 压缩HTML

/* ------------------------------------打包html任务-------------------------------------------------- */
gulp.task('html', (over) => {
    gulp 
    .src(['temp/**/*.json', 'src/*.html',])
    .pipe( revCollector({
        replaceReved: true,
        //路径
        dirReplacements: {
          './js': './js',
          './css': './css',
        }
    }) )
    .pipe(minifyhtml())
    .pipe(gulp.dest('./dist/'))
    //自带over
    over()
  })


/* ------------------------------------打包imgs任务-------------------------------------------------- */
gulp.task('imgs',(over)=>{
    gulp
        .src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/imgs/'))
        setTimeout(() => {
        //自带over
        over()
        }, 10000)
})

/* ------------------------------------打包CSS任务-------------------------------------------------- */
gulp.task('css',(over)=>{
    gulp
    .src('./src/css/*.css')
    .pipe(minifyCSS())
    .pipe(rev())
    .pipe(gulp.dest('./dist/css/'))

    .pipe(rev.manifest())
    .pipe(gulp.dest('temp/css')) 
    //自带over
    over()
})

/* ------------------------------------清楚目录-------------------------------------------------- */
const fs = require('fs');
gulp.task('clean', (over) => {
    
    if (fs.existsSync('dist/'))
    {
        gulp.src('dist/',{read: false})
        .pipe(clean());
    } 
    setTimeout(() => {
        //自带over
        over()
    }, 2000)
})

/* ------------------------------------打包JS任务-------------------------------------------------- */
gulp.task('js',(over)=>{
    gulp
    .src('./src/js/*.js')
    .pipe(rev())
    .pipe(babel({"presets": ["env"]}))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'))

    .pipe(rev.manifest())
    .pipe(gulp.dest('temp/js')) 
    //自带over
    over()
})

/* ------------------------------------批量打包-------------------------------------------------- */
gulp.task('data',gulp.series('clean','js','css','html','imgs',()=>{
    console.log('data完成打包');
}))

/* --------------------------------------使用node=>web服务器------------------------------------------- */
//web服务器
const server = require('browser-sync').create()
const watch = require('gulp-watch')
//http-proxy-middleware模块
const { createProxyMiddleware } = require('http-proxy-middleware');

//前端代理跨域
gulp.task('serve',()=>{   
            server.init({
                server: {
                    baseDir: './src',
                    middleware: [

                    //网站只要请求的是/api开头的会被拦截    
                    createProxyMiddleware('/api', { 

                        // 目标服务器网址
                        target: "http://kg.zhaodashen.cn/v1/",

                        changeOrigin: true, // 是否允许跨域
                        secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                        pathRewrite: {      // 重写路径请求
                            //移除/api
                            '^/api' : ''
                        },
                    })
                    ]
                },
                  port:80
            })

            // 监控文件修改
            watch('src/*.html', function() {
                console.log('你修改HTML文件了')
                server.reload()
            })
            watch('src/css/*.css', function() {
                console.log('你修改CSS文件了')
                server.reload()
            }) 
            watch('src/js/*.js', function() {
                console.log('你修改JS文件了')
                server.reload()
            })
})    


